﻿@using Model.WXshopBuiness
@using Xproject.Util
@using Model.WXshopBuiness.Enum
@{
    Layout = null;
    string Domain = CommonHelper.GetAppSettings("Domin");
    string productId = ViewBag.productId;
    bool DoneBefore = ViewBag.DoneBfore;
    string orderId =ViewBag.orderId;
}
@model ProductComments

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link href="~/Content/bootstrap.css" rel="stylesheet" />
    <link href="~/Content/css/shop/home.css" rel="stylesheet" />

    <link href="http://at.alicdn.com/t/font_u5tafk2orz281tt9.css" rel="stylesheet" type="text/css" />
    <link href="~/Content/layerui/need/layer.css" rel="stylesheet" />
    <script src="~/Content/layerui/layer.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="~/Scripts/distpicker/distpicker.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>
    <script src="~/Scripts/shop/index.js"></script>

    <style>
        .form-group {
            border-bottom: 1px solid #ececec;
            overflow: hidden;
            margin-top: 5px;
            margin-bottom: 0;
        }

            .form-group .col-xs-4 {
                padding-left: 0;
                color: #333;
            }

            .form-group .col-xs-8 {
                padding: 0;
            }

        .control-label {
            line-height: 2.143em;
            text-align: right;
        }

        .form-control {
            box-shadow: none;
            padding: 0 0.429em;
            height: 2.143em;
            border: none;
        }

        #editContent span {
            margin-left: 1rem;
        }

        .SelectColor {
            color: orangered;
        }
    </style>
</head>
<body>


    <div class="container body-content">




        <div class="top_c">
            <a href="@(Domain)/Order/MyOrders?type=@((int)Enum_OrderState.WAITCOMMENT)" class="iconfont icon-jiantou-copy-copy"></a>
            <p class="titi">评论此商品</p>
        </div>
        <div id="editContent">
            <div class="cong">
                <div class="container" style="background:#fff;">
                    <div class="row" style=" height: 4rem;">
                        <div class=" col-sm-2" style="float: left;"> <label class="control-label ">服务星数：</label></div>
                        <div class="col-sm-8" id="ServiceStartsdiv" style="display: inline-block;line-height: 2.143em;">

                            @if (Model != null)
                            {
                                for (int i = 0; i < Model.CommentServiceStarts; i++)
                                {
                            <span class="glyphicon glyphicon-star SelectColor"></span>
                            }
                   
                            }
                            else
                            {
                        <span class="glyphicon glyphicon-star"></span>
                        <span class="glyphicon glyphicon-star"></span>
                        <span class="glyphicon glyphicon-star"></span>
                        <span class="glyphicon glyphicon-star"></span>
                        <span class="glyphicon glyphicon-star"></span>
                        <input type="hidden" name="CommentServiceStarts" id="CommentServiceStarts" />
}

                        </div>
                    </div>
                    <div class="row" style=" height: 4rem;">
                        <div class=" col-sm-2" style="float: left;"> <label class="control-label ">物流星数：</label></div>
                        <div class="col-sm-8" id="LogisticStartsdiv" style="display: inline-block;line-height: 2.143em;">
                            @if (Model != null)
                            {
                                for (int i = 0; i < Model.CommentLogisticStarts; i++)
                                {
                        <span class="glyphicon glyphicon-star SelectColor"></span>
                                }

                            }
                            else
                            {
                        <span class="glyphicon glyphicon-star"></span>
                        <span class="glyphicon glyphicon-star"></span>
                        <span class="glyphicon glyphicon-star"></span>
                        <span class="glyphicon glyphicon-star"></span>
                        <span class="glyphicon glyphicon-star"></span>
                        <input type="hidden" name="CommentLogisticStarts" id="CommentLogisticStarts" />
                            }
                        </div>
                    </div>
                    <div class="row" style=" height: 4rem;">
                        <div class=" col-sm-2" style="float: left;"> <label class="control-label ">包装星数：</label></div>
                        <div class="col-sm-8" id="PackageStartsdiv" style="display: inline-block;line-height: 2.143em;">
                            @if (Model != null)
                            {
                                for (int i = 0; i < Model.CommentPackageStarts; i++)
                                {
                        <span class="glyphicon glyphicon-star SelectColor"></span>
                                }

                            }
                            else
                            {
                        <span class="glyphicon glyphicon-star"></span>
                        <span class="glyphicon glyphicon-star"></span>
                        <span class="glyphicon glyphicon-star"></span>
                        <span class="glyphicon glyphicon-star"></span>
                        <span class="glyphicon glyphicon-star"></span>
                        <input type="hidden" name="CommentPackageStarts" id="CommentPackageStarts" />
                            }
                        </div>
                    </div>

                    <div class="form-group" style="border-bottom:none;">
                        <label for="DetailAddress" class="col-xs-12 " style="text-align:left">写点什么吧</label>
                        <div class="col-xs-12">
                            <textarea class="control" name="Comments" id="Comments" placeholder="" cols="3" rows="3" style="width:90%" required>@(Model!=null?Model.Comment:"")</textarea>
                        </div>
                    </div>

                </div>
                @if (!DoneBefore)
                {
                <div class="container" id="btnsave">
                    <button onclick="saveit()" class="deng" style="margin-top:3em;">保 存</button>
                </div>
                  }



            </div>
        </div>
    </div>
    <script type="text/javascript">
        $(function () {
            $("#ServiceStartsdiv span").each(function (i, index) {

                $(this).click(function () {
                    var starts = 0;
                    starts = Number($("#CommentServiceStarts").val());
                    if ($(this).hasClass("SelectColor")) {
                        $(this).removeClass("SelectColor");
                        if (starts > 0) {
                            starts = starts - 1;
                        }
                        $("#CommentServiceStarts").val(starts);
                    } else {
                        $(this).addClass("SelectColor");
                        starts = starts + 1;
                        $("#CommentServiceStarts").val(starts);
                    }
                });
            });

            $("#LogisticStartsdiv span").each(function (i, index) {

                $(this).click(function () {
                    var starts = 0;
                    starts = Number( $("#CommentLogisticStarts").val());
                    if ($(this).hasClass("SelectColor")) {
                        $(this).removeClass("SelectColor");
                        if (starts > 0) {
                            starts = starts - 1;
                        }
                        $("#CommentLogisticStarts").val(starts);
                    } else {
                        $(this).addClass("SelectColor");
                        starts = starts + 1;
                        $("#CommentLogisticStarts").val(starts);
                    }
                });
            });
            $("#PackageStartsdiv span").each(function (i, index) {

                $(this).click(function () {
                    var starts = 0;
                    starts = Number($("#CommentPackageStarts").val());
                    if ($(this).hasClass("SelectColor")) {
                        $(this).removeClass("SelectColor");
                        if (starts > 0) {
                            starts = starts - 1;
                        }
                        $("#CommentPackageStarts").val(starts);
                    } else {
                        $(this).addClass("SelectColor");
                        starts = starts + 1;
                        $("#CommentPackageStarts").val(starts);
                    }
                });
            });

    });

        function saveit() {
          var commentServiceStarts =  $("#CommentServiceStarts").val();
          var commentLogisticStarts = $("#CommentLogisticStarts").val();
          var commentPackageStarts = $("#CommentPackageStarts").val();
          var comments= $("#Comments").val();
           $.ajax({
            type: "POST",
            url: '@(Domain)/Order/DoComments',
            data: {
                CommentServiceStarts: commentServiceStarts,
                CommentLogisticStarts: commentLogisticStarts,
                CommentPackageStarts: commentPackageStarts,
                Comments: comments,
                OrderId:'@(orderId)',
                productId:'@(productId)'
            },
            cache: false,
            success: function (data) {
                if (data.Success == true) {
                    $("#btnsave").remove();
                }
                layer.open({
                    content: data.Data
                    , skin: 'msg'
                    , time: 2 //2秒后自动关闭
                });
            }
        });
    }

    </script>
</body>
</html>